<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;float:left"></div>
<div id="leida" style="width:600px;height:400px;float:left"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
            var option = {
      //标题
        title: {
          text: '散点图'
        },
        //指示器
        tooltip: {},
        //图列，动态效果
        legend: {
          data: ['PM']
        },
        xAxis: {
            {#插入数据#}
          data: {{ timestamp | safe}},
          axisLabel:{
                interval:0
          }
        },
        yAxis: {},
        series: [
          {
            name: 'PM',
            type: 'scatter',
            data:{{pm}}
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);





</script>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('leida'));
      var tw = [{% for item in tw %}{{ item }},{% endfor %}];
      var hb = [{% for item in hb %}{{ item }},{% endfor %}];

        option = {
      title: {
        text: '疫情雷达图'
      },
      tooltip:{},
      legend: {
        data: ['台湾', '湖北']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '新增', max: 150 },
          { name: '现有', max: 7000 },
          { name: '累计', max: 30000 },
          { name: '治愈', max: 70000 },
          { name: '死亡', max: 52000 }
        ]
      },
      series: [
        {
          name: '台湾和湖北疫情对比',
          type: 'radar',
          data: [
            {
              value: tw,
              name: '台湾'
            },
            {
              value: hb,
              name: '湖北'
            }
          ]
        }
      ]
    };
    myChart1.setOption(option);




</script>
</body>
</html>